<template>
  <div >
    <el-select v-model="id" class="full-width" clearable @change="changeSelect" :disabled="disabled" placeholder="请选择合同分类">
      <el-option
        v-for="item in dataList"
        :key="item.id"
        :label="item.categoryName"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import util from '../../utils/util'
  export default {
    name: 'rf-contract-category',
    props: {
      cid: {
        type: [Number, String]
      },
      cname: {
        type: String
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        id: this.cid,
        name: this.cname,
        dataList: [] // 数据列表
      }
    },
    watch: {
      cid (newValue) {
        this.id = newValue
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      changeSelect (value) {
        let item = util.getObjInArr(this.dataList, 'id', value)
        this.name = item.categoryName
        this.$emit('update:cid', this.id)
        this.$emit('update:cname', this.name)
        this.$emit('change', this.id, this.name)
      },
      // 获取
      getDataList () {
        let fun = api.contractCategoryList
        fun().then(res => {
          if (res.code === api.SUCCESS) {
            res.data.sort((start, next) => {
              return start.sort - next.sort
            }) // 按sort排序
            this.dataList = res.data
          }
        })
      }
    }
  }
</script>

